<template>
  <div class="subnav" :style="'height:' + height + 'px'">
    <span ref="triangle" :style="'left:' + offsetLeft + 'px'"></span>
    <div class="tab-item wrap">
      <ul class="clearfloat" v-if="currentMenu==='discoverMusic'">
        <router-link to="/discoverMusic" tag="li" class="floatLeft">
          <a href="">推荐</a>
        </router-link>
        <router-link to="/myMusic" tag="li" class="floatLeft">
          <a href="">排行榜</a>
        </router-link>
        <router-link to="/friend" tag="li" class="floatLeft">
          <a href="">歌单</a>
        </router-link>
        <router-link to="/mall" tag="li" class="floatLeft">
          <a href="">主播电台</a>
        </router-link>
        <router-link to="/musician" tag="li" class="floatLeft">
          <a href="">歌手</a>
        </router-link>
        <router-link to="/download" tag="li" class="floatLeft">
          <a href="">新碟上架</a>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  const currentRoute = 'discoverMusic'
  const HEIGHT = 35
  const OTHERHEIGHT = 5
  export default {
    data() {
      return {
        offsetLeft: Number,
        currentMenu: String,
        height: Number,
        lineHeight: Number
      }
    },
    methods: {
      clickNav(el, currentMenu) {
        this.currentMenu = currentMenu
        if (this.currentMenu === 'discoverMusic') {
          this.height = HEIGHT
        } else {
          this.height = OTHERHEIGHT
        }
        const width = window.getComputedStyle(this.$refs.triangle, null).width
        this.offsetLeft = el.target.offsetLeft + el.target.clientWidth / 2 - parseInt(width) / 2
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        this.currentMenu = currentRoute
        if (this.currentMenu === 'discoverMusic') {
          this.height = HEIGHT
        } else {
          this.height = OTHERHEIGHT
        }
        const width = window.getComputedStyle(this.$refs.triangle, null).width
        this.offsetLeft = this.$parent.$refs.discover.$el.offsetLeft + this.$parent.$refs.discover.$el.clientWidth / 2 - parseInt(width) / 2
      })
    }
  }
</script>

<style>
  .subnav {
    position: relative;
    font-size: 12px;
    background-color: #C20C0C;
  }

  .subnav ul {
    padding-left: 188px;
  }

  .subnav ul a {
    display: inline-block;
    padding: 0 13px;
    margin: 7px 17px 0;
    height: 20px;
    line-height: 20px;
    border-radius: 20px;
    background: #C20C0C;
    transition: background .2s linear;
  }

  .subnav li.active a, .subnav li a:hover {
    background: #9B0909;
  }

  .subnav span {
    position: absolute;
    top: -6px;
    display: inline-block;
    width: 12px;
    height: 7px;
    background: url('../../../resource/topbar.png') no-repeat -227px 0;
  }
</style>
